<template>
  <div class="call" v-show="showFlag">
      <div class="phone">
          <p class="phoneTitle">客服号码:</p>
          <p class="phoneNumber">{{phone}}</p>
          <div class="phoneBtn">
              <div class="btn" @click="cancelPhone"><img src="https://cdn.92jiangbei.com/newjiangbei/img/newImg/bitmap/icon-quxiao.png"/><span>取消</span></div>
              <div class="btn btn1"><img src="https://cdn.92jiangbei.com/newjiangbei/img/newImg/bitmap/icon-boda.png"/><span><a :href='"tel:"+phone'>拨打</a></span></div>
          </div>
      </div>
  </div>
</template>

<script>

export default {
  props: {
    showFlag: {
      type: Boolean,
      default: false
    },
    phone: {
      type: String,
      default: '400-820-0668'
    }
  },
  data () {
    return {
      isShow: true
    }
  },
  mounted () {

  },
  methods: {
    backUp () {
      this.$router.go(-1)
      // 返回首页
      //  this.$router.push("/");
    },
    cancelPhone () {
      // this.showFlag= false;
      this.$emit('showCancelPhone', 1)
    },
    callPhone () {
      document.addEventListener('deviceready', function () {
        window.c_plugins.merchantBridge.actionCallUp(function () {
          // alert('suc');
        }, function (err) {
          alert(err.message || err || '网络错误，请检查网络连接')
        }, {
          phoneNumber: '4008200668'// 拨打电话号码
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .call{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
    /* opacity:0.37920000000000004; */
    z-index:9999;
    overflow: hidden;
    position: fixed;
    top: 0;
  }
  .phone{
    width:78.66vw;
    height:40vw;
    padding:4.26vw;
    box-sizing:border-box;
    background-color: white;
    border-radius:2.13vw;
    margin:0 auto;
    overflow: hidden;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-70%);
    color:#333333;
  }
  .phoneTitle{
    font-size:4vw;
  }
  .phoneNumber{
    font-size:5.33vw;
    font-family:PingFangSC-Medium,PingFangSC;
    font-weight:500;
    text-align:center;
    margin:3.06vw 0 3.33vw;
  }
  .phoneBtn{
    display:flex;
    justify-content:space-between;
  }
  .phoneBtn .btn{
    width:33.06vw;
    height:10.66vw;
    line-height:10.66vw;
    background:#F6F6F6;
    color:#666666;
    font-size:5.33vw;
    text-align:center;
    vertical-align: middle;
    border-radius:1.066vw;
  }
  .btn img{
    width:5.06vw;
    height:5.33vw;
    vertical-align: middle;margin-right:3.2vw;
  }
  .phoneBtn .btn1,a {
    background:linear-gradient(180deg,rgba(245,230,203,1) 0%,rgba(231,200,156,1) 100%);
    color:#191919;
  }

  a{text-decoration:none;color: #3B3B3B;cursor: pointer;}
  a:hover{
      color: #3B3B3B;
  }
  a:active{
      color: #3B3B3B;
  }

</style>
